<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{ title }}</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		<scroll-view scroll-y scroll-with-animation enable-back-to-top>
			<block v-for="(item, index) in itemList" :key="index">
				<article-card :item='item' :jump='false'></article-card>
			</block>
		</scroll-view>
		<uni-load-more v-if="itemList.length > 0" iconType="auto" :status="status" />
	</view>
</template>

<script>
	import * as article from '@/api/blog/article/article.js'
	export default {
		data() {
			return {
				isLoad: false,
				type: '',
				title: '',
				query: {},
				status: 'init',
				pages: 0,
				pageNumber: 1,
				itemList: []
			}
		},
		onLoad: function(options) {
			this.title = options.title
			switch (options.type) {
				case '0':
					this.query = {
						categoryId: options.key
					}
					break
				case '1':
					this.query = {
						ym: options.key
					}
					break
				case '2':
					this.query = {
						labelId: options.key
					}
					break
			}
			this.search()
		},
		onReachBottom() {
			// 上拉加载下一页
			if (this.status === 'more') {
				this.search(this.pageNumber + 1)
			}
		},
		methods: {
			search(pageNumber) {
				if (pageNumber) {
					this.status = 'loading'
					this.pageNumber = pageNumber
				} else {
					this.status = 'init'
					this.pages = 0
					this.pageNumber = 1
					this.itemList = []
					this.isLoad = true
				}
				const query = this.query
				query.pageNumber = this.pageNumber
				article.getPage(query).then(res => {
					if (this.pageNumber = 1) {
						this.isLoad = false
					}
					if (res.code === 1) {
						const data = res.data
						this.pages = data.pages
						if (this.pages == 0) {
							this.status = 'noData'
						} else {
							this.itemList = this.itemList.concat(data.rows)
							if (this.pages <= this.pageNumber) {
								this.status = 'noMore'
							} else {
								this.status = 'more'
							}
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>
